<script setup>
import router from "@/router";
import {onMounted, ref} from 'vue'
import {getPhoneCodeService, RegisterService} from "@/api/user"
const hasCode = ref(false);
const curStep = ref(0);

import { user } from '@/stores/counter.js';
import {ElMessage} from "element-plus";
const userInfo = user();

const testMode = ref(localStorage.getItem('testMode')==='true');

const formData = ref({
  username: '',
  password: '',
  code: '',
  phone: '',
  rePassword: '',
  realName: '',
  sex: 1,
  birthday: '',
  idCard: '',
})
const toRegister = async () => {
  if (!checkForm()) {
    return;
  }
  let result = await RegisterService(formData.value)
  if (result.code === 200) {
    ElMessage.success(result.message)
    curStep.value = 2;
    // router.push("/")
  }
}

const getPhone = async () => {
  if (formData.value.phone === '') {
    ElMessage.error("手机号不能为空");
    return;
  } else if (formData.value.phone.length !== 11) {
    ElMessage.error("请输入正确的十一位数字");
    return;
  } else {
    hasCode.value = true;
    console.log("register", formData.value);
    let result = await getPhoneCodeService(formData.value);
    if (result.code === 200) {
      ElMessage.success("发送成功")
    } else {
      ElMessage.error(result.message)
    }
    console.log("返回的数据是：", result);
  }
};

const checkForm = () => {
  if (formData.value.username === "" || formData.value.password === "" || formData.value.rePassword === ""
      || formData.value.phone === "") {
    ElMessage.error("请将信息填写完整")
    return false;
  } else if (formData.value.password !== formData.value.rePassword) {
    ElMessage.error("两次密码不一致")
    return false;
  } else if (formData.value.realName === "" || formData.value.sex === null || formData.value.birthday === "" ||
      formData.value.idCard === "") {
    ElMessage.error("个人信息未填写完整")
    return false;
  }
  return true;
}

</script>

<template>
  <!-- 总容器 -->
  <div class="wrapper">
    <!--页头-->
    <header>
      <i class="fa fa-angle-left" @click="router.back();"></i>
      <p>注册</p>
      <div></div>
    </header>
    <div class="top-ban"></div>
    <h1 style="margin-left: 4vw">欢迎注册</h1>
    <!--测试模块-->
    <div v-if="testMode">
      <el-input-number v-model="curStep"/>
      <el-button @click="console.log(formData)">测试</el-button>
    </div>
    <!--步骤条-->
    <el-steps style="margin-top: 2vh" :active="curStep" align-center v-show="curStep!==2">
      <el-step>
        <template #title>
          <div style="font-size: smaller">完善账号信息</div>
        </template>
      </el-step>
      <el-step>
        <template #title>
          <div style="font-size: smaller">完善个人信息</div>
        </template>
      </el-step>
      <el-step>
        <template #title>
          <div style="font-size: smaller">注册成功</div>
        </template>
      </el-step>
    </el-steps>
    <!--账号信息填写-->
    <table v-show="curStep===0">
      <tr>
        <td>用户名</td>
        <td><input type="text" placeholder="请输入用户名" v-model="formData.username"></td>
        <td/>
      </tr>
      <tr>
        <td>密码</td>
        <td><input type="password" placeholder="请输入密码" v-model="formData.password"></td>
        <td/>
      </tr>
      <tr>
        <td>确认密码</td>
        <td><input type="password" placeholder="请再次输入密码" v-model="formData.rePassword"></td>
        <td/>
      </tr>
    </table>
    <!--个人信息填写页-->
    <table v-show="curStep===1">
      <tr>
        <td>真实姓名</td>
        <td><input v-model="formData.realName" type="text" placeholder="真实姓名便于查看体检报告"></td>
        <td/>
      </tr>
      <tr>
        <td>生日</td>
        <td><input v-model="formData.birthday" type="date"></td>
        <td/>
      </tr>
      <tr>
        <td>性别</td>
        <td>
          <input v-model="formData.sex" type="radio" checked value="1">男
          <input v-model="formData.sex" type="radio" value="0">女
        </td>
        <td/>
      </tr>
      <tr>
        <td>身份证号</td>
        <td><input v-model="formData.idCard" type="text" placeholder="请输入身份证号"></td>
        <td/>
      </tr>
      <tr>
        <td>手机号码</td>
        <td><input type="text" placeholder="请输入手机号码" v-model="formData.phone"></td>
        <td>
          <el-button @click="getPhone">获取验证码</el-button>
        </td>
      </tr>
      <tr v-show="hasCode||testMode">
        <td>验证码</td>
        <td><input type="text" placeholder="请输入验证码" v-model="formData.code"></td>
        <td/>
      </tr>
    </table>


    <!--按钮组-->
    <div style="position: absolute;bottom: 2vh;left: 50%;transform: translateX(-50%);">
      <div class="btn" v-show="curStep!==2"
           @click="curStep=curStep-1>=0?curStep-1:curStep;"
           :class="{'disable-bnt':curStep===0}"
      >上一步
      </div>
      <div class="btn" v-show="curStep===0"
           @click="curStep++">下一步
      </div>
      <div class="btn" v-show="curStep===1" @click="toRegister">完成</div>
    </div>

    <!--结果页-->
    <div v-show="curStep===2" style="margin-top: 10vh">
      <el-result
          icon="success"
          title="注册成功"
      >
        <template #extra>
          <el-button type="success" @click="router.push('/login')">返回登录界面</el-button>
        </template>
      </el-result>
    </div>

  </div>

</template>

<style scoped>
@import "@/assets/css/register.css";
@import "@/assets/framework/font-awesome/css/font-awesome.min.css";
@import "@/assets/framework/reset.css";

.disable-bnt {
  background-color: #ccc;
  color: #fff;
}

</style>
